<!-- eslint-disable vue/valid-v-slot -->
<template>
  <div style="scrollbar-width: none !important">
    <div class="containBox">
      <div class="tabelLeft">
        <!-- <div class="tabTitle">
          <span class="title">图片分组</span>
          <div class="btns">
            <a-button style="padding: 0px 4px" type="text" size="small" @click="addClass"
              >新建</a-button
            >
            <a-button
              style="padding: 0px 4px"
              status="success"
              type="text"
              @click="showClassList"
              size="small"
              >设置</a-button
            >
          </div>
        </div> -->
        <div class="tagList">
          <div class="tagTops">
            <div
              class="activeTag"
              v-for="(item, index) of treeData.list"
              :key="index"
              @click="changeTagType(item)"
            >
              <span
                :class="[form.classId == item.id ? 'actives' : 'noactive']"
                @contextmenu.prevent.stop="onContextMenu(item, $event)"
              >
                <span class="wraps">
                  <img
                    class="imgIcon"
                    v-if="form.classId == item.id"
                    src="@/assets/wenjianwhite.png"
                    alt=""
                  />
                  <img class="imgIcon" v-else src="@/assets/wenjian.png" alt="" />
                  <span
                    style="
                      display: inline-block;
                      max-width: 100%;
                      overflow: hidden;
                      text-overflow: ellipsis;
                      white-space: nowrap;
                    "
                    >{{ item.name }}</span
                  >
                </span>
              </span>
            </div>
          </div>
          <div class="tagBottoms">
            <a-button type="outline" status="warning" @click="addClass" :loading="loading">
              <!-- Use the default slot to avoid extra spaces -->
              <template #default>新建分组</template>
            </a-button>
            <a-button
              type="outline"
              status="warning"
              @click="showClassList"
              style="margin-top: 10px"
              :loading="loading"
            >
              <!-- Use the default slot to avoid extra spaces -->
              <template #default>管理分组</template>
            </a-button>
          </div>
        </div>
      </div>
      <TableBody :style="activeTag != 'pageShow' ? 'width: calc(100% - 297px)' : ''">
        <template #header>
          <!-- <div
            style="
              padding: 12px 0px 0px;
              box-sizing: border-box;
              text-align: center;
              font-size: 18px;
            "
            >{{ activeTitle }}</div
          > -->
          <TableHeader ref="tableHeaderRef" style="margin-bottom: -20px" :show-filter="false">
            <template #search-content>
              <a-form ref="seachForm" :model="form">
                <a-row :gutter="24">
                  <a-col :span="16">
                    <a-button type="primary" @click="showUpload">
                      <!-- Use the default slot to avoid extra spaces -->
                      <template #default>上传文件</template>
                    </a-button>
                    <a-button
                      style="margin-left: 12px"
                      type="outline"
                      status="warning"
                      @click="modal.showUploadModal = true"
                      >同步文件</a-button
                    >
                    <a-button
                      style="margin-left: 12px"
                      type="outline"
                      status="success"
                      @click="setGroup"
                      v-if="checkList.length > 0"
                      >设置分组</a-button
                    >
                    <a-button
                      type="outline"
                      style="margin-left: 12px"
                      @click="delImagesList"
                      v-if="checkList.length > 0"
                      >删除图片</a-button
                    >
                  </a-col>
                  <a-col :span="8">
                    <a-form-item field="name" hide-label>
                      <a-input
                        class="width100"
                        v-model="form.name"
                        placeholder="请输入图片名称"
                        search-button
                        allow-clear
                      >
                        <template #append>
                          <a-button type="primary" @click="doRefresh(1)">搜索</a-button>
                        </template>
                      </a-input>
                    </a-form-item>
                  </a-col>
                </a-row>
              </a-form>
            </template>
          </TableHeader>
        </template>
        <template #table-config style="display: none"> </template>
        <template #default>
          <a-spin :loading="imagesLoading" tip="加载中····" style="width: 100%">
            <a-empty v-if="imageList.list.length <= 0" />
            <a-checkbox-group
              style="
                width: 100%;
                display: flex;
                flex-wrap: wrap;
                padding: 0px 0px 0px 20px;
                box-sizing: border-box;
              "
              :default-value="[]"
              v-model="checkList"
            >
              <div class="imageBoxs" v-for="(item, index) in imageList.list" :key="index">
                <div :class="isItemIncluded(item.id) ? 'imgBox2' : 'imgBox'">
                  <img
                    class="imageItems"
                    @click="setImageClick(item)"
                    :src="reSetImage(item.path)"
                    alt=""
                  />
                  <img
                    v-if="isItemIncluded(item.id)"
                    src="@/assets/xuanzhong.png"
                    class="poImg"
                    alt=""
                  />
                </div>

                <div class="names_check">
                  <a-checkbox :value="item">{{ item.name }}</a-checkbox>
                </div>
              </div>
              <div class="boxsItem" style="width: 100px" v-for="i in 10" :key="i"> </div>
            </a-checkbox-group>
          </a-spin>
        </template>
        <template #footer>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: center !important;
              align-items: center;
              margin-bottom: 20px;
            "
          >
            <div></div>
            <TableFooter
              style="margin-top: 0px"
              ref="tableFooterRef"
              :pagination="pagination"
              position="end"
            />
          </div>
        </template>
      </TableBody>
      <div class="tabelRight" v-if="activeTag != 'pageShow'">
        <div class="heads">
          <p class="yixuan">已选：{{ chooseList.length }}</p>
          <p class="closeAll" @click="clealChooseImgs">清空</p>
        </div>
        <div class="chooseLists" id="scrollDiv">
          <div class="items" v-for="(item, index) in chooseList" :key="index">
            <a-image :src="reSetImage(item.path)" alt="" />
            <p class="imgNames">{{ item.name }}</p>
          </div>
        </div>
      </div>
    </div>
    <a-modal
      v-model:visible="modal.showUploadvisible"
      title-align="start"
      :mask-closable="false"
      @cancel="closeUpload"
    >
      <template #title> 上传图片 </template>
      <a-form
        ref="infoRef"
        label-align="left"
        :model="info.info"
        :auto-label-width="true"
        :labelCol="{ span: 4 }"
      >
        <a-form-item label="图片" field="publicSecurity">
          <a-upload
            ref="uploadRef"
            action="/app/library/upload/image"
            :show-file-list="false"
            :data="{
              id: info.info.id,
              name: info.info.name,
            }"
            :auto-upload="false"
            @success="onSuccessLogo"
            @error="onErrorLogo"
            @progress="onProgress"
            name="file"
            @change="onChange"
            :image-preview="true"
          >
            <template #upload-button>
              <div class="arco-upload-list-picture custom-upload-avatar" v-if="info.info.file">
                <img style="width: 80px; height: 80px; display: block" :src="info.info.file" />
                <div class="arco-upload-list-picture-mask">
                  <IconEdit />
                </div>
              </div>
              <div class="arco-upload-picture-card" v-else>
                <div class="arco-upload-picture-card-text">
                  <IconPlus />
                </div>
              </div>
              <!-- </div> -->
            </template>
          </a-upload>
        </a-form-item>
        <a-form-item label="图片名称" asterisk-position="end" field="name">
          <a-input v-model.trim="info.info.name" placeholder="请输入图片名称" allow-clear />
        </a-form-item>
        <a-form-item label="图片分组" field="id">
          <a-select
            class="width100"
            v-model="info.info.id"
            placeholder="请选择图片分组"
            allow-clear
          >
            <a-option v-for="(item, index) in treeData.classList" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="closeUpload">取消</a-button>
          <a-button type="primary" :loading="loadUpload" @click="handleSubmit">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="modal.showSet"
      title-align="start"
      :mask-closable="false"
      @cancel="modal.showSet = false"
    >
      <template #title> 设置图片分组 </template>
      <a-form
        ref="infoRef"
        :model="info.info"
        label-align="left"
        :auto-label-width="true"
        :labelCol="{ span: 4 }"
      >
        <a-form-item
          label="图片分组"
          asterisk-position="end"
          field="id"
          :rules="[{ required: true, message: '请选择图片分组' }]"
        >
          <a-select
            class="width100"
            v-model="info.info.id"
            placeholder="请选择图片分组"
            allow-clear
          >
            <a-option v-for="(item, index) in treeData.classList" :key="index" :value="item.id">{{
              item.name
            }}</a-option>
          </a-select>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="modal.showSet = false">取消</a-button>
          <a-button type="primary" @click="handleSubmitSet">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="modal.showUploadModal"
      title-align="start"
      :mask-closable="false"
      @cancel="modal.showSet = false"
    >
      <template #title> 上传云端 </template>
      <a-form
        ref="infoRef"
        :model="uplaodYunForm"
        label-align="left"
        :auto-label-width="true"
        :labelCol="{ span: 4 }"
      >
        <a-form-item label="同步类型" asterisk-position="end" field="mainPush">
          <a-radio-group class="radio-bcg" v-model="uplaodYunForm.type">
            <a-radio :value="0">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">上传未上传图片</div>
                </div>
              </template>
            </a-radio>
            <a-radio :value="1">
              <template #radio="{ checked }">
                <div style="display: flex" :class="{ 'custom-radio-card-checked': checked }">
                  <div className="custom-radio-card-mask">
                    <div className="custom-radio-card-mask-dot"></div>
                  </div>
                  <div className="custom-radio-card-title">上传所有图片</div>
                </div>
              </template>
            </a-radio>
          </a-radio-group>
        </a-form-item>
      </a-form>
      <template #footer>
        <a-space>
          <a-button @click="modal.showUploadModal = false">取消</a-button>
          <a-button type="primary" :loading="loadingTongbu" @click="handleSubmitUpy">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <a-modal
      v-model:visible="fenleivisible"
      @cancel="fenleivisible = false"
      title="设置分类"
      width="700px"
      :mask-closable="false"
      title-align="start"
    >
      <a-space :size="20" style="margin-bottom: 20px">
        <a-button type="primary" @click="addClass">
          <template #icon>
            <icon-plus />
          </template>
          <template #default>新建</template>
        </a-button>
      </a-space>
      <a-spin :loading="classLoading" tip="加载中····" style="width: 100%">
        <a-table
          :bordered="{ wrapper: tables.bordered, cell: tables.bordered }"
          :stripe="(tables.striped as boolean)"
          :data="typeClass"
          :pagination="false"
          :column-resizable="true"
          :rowKey="rowKey"
          table-layout-fixed
        >
          <template #columns>
            <a-table-column
              v-for="item of tableColumnsClass.list"
              :key="item.key"
              align="center"
              :width="item.width"
              :title="(item.title as string)"
              :data-index="(item.key as string)"
            >
              <template v-if="item.key === 'actions'" #cell="{ record }">
                <a-space :size="2">
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    :key="record"
                    @click="updateClass(record)"
                    >编辑</a-button
                  >
                  <a-button
                    style="padding: 0px 4px"
                    type="text"
                    size="small"
                    status="warning"
                    @click="delCancelClasss(record)"
                    >删除</a-button
                  >
                </a-space>
              </template>
              <template v-else-if="item.key === 'speedLimitTypeId'" #cell="{ record }">
                <span
                  v-for="(items, index) in typeListsDatas"
                  :key="index"
                  v-show="items.id == record.speedLimitTypeId"
                  >{{ items.name }}</span
                >
              </template>
            </a-table-column>
          </template>
        </a-table>
      </a-spin>
      <template #footer>
        <!-- <a-space>
          <a-button @click="handleCancelsb">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkBansb">确定</a-button>
        </a-space> -->
      </template>
    </a-modal>
    <a-modal
      v-model:visible="addClassPop"
      @cancel="handleCancelClass"
      :title="classTitle"
      width="600px"
      :mask-closable="false"
      title-align="start"
    >
      <div style="max-height: 600px; padding-bottom: 22px">
        <a-form ref="subAdds" label-align="left" :auto-label-width="true" :model="subFormClass">
          <a-form-item
            label="分组名称"
            asterisk-position="end"
            field="name"
            :rules="[{ required: true, message: '分组名称不能为空' }]"
            :validate-trigger="['change', 'input']"
          >
            <a-input v-model.trim="subFormClass.name" placeholder="请输入分组名称" allow-clear />
          </a-form-item>
        </a-form>
        <a-form-item
          label="分组排序"
          field="sort"
          asterisk-position="end"
          :rules="[{ required: true, message: '分组排序不能为空' }]"
          :validate-trigger="['change', 'input']"
        >
          <a-input v-model.trim="subFormClass.sort" placeholder="请输入分组排序" allow-clear />
        </a-form-item>
      </div>
      <template #footer>
        <a-space>
          <a-button @click="handleCancelClass">取消</a-button>
          <a-button type="primary" @click="handleBeforeOkAddClass">确定</a-button>
        </a-space>
      </template>
    </a-modal>
    <ul v-show="showContextMenu" class="contex-menu-wrapper" :style="contextMenuStyle">
      <li>
        <a-button type="text" @click="updatClasss"> 编辑 </a-button>
      </li>
      <li>
        <a-button status="warning" type="text" @click="delCancelClasss"> 删除 </a-button>
      </li>
    </ul>
  </div>
</template>

<script lang="ts" setup>
  import {
    getClassification,
    getImageList,
    updateImageClass,
    addImageClass,
    delImageClass,
    delImages,
    setImageList,
    cloudStorage,
    librartGetUrl,
  } from '@/api/url'
  import { reSetImage } from '@/api/imageNiu'
  import { post, get, formpost } from '@/api/http'
  import { usePagination, useRowKey } from '@/hooks/table'
  import { onMounted, reactive, ref, watch, computed } from 'vue'
  import _ from 'lodash-es'
  import { Message, Modal, Form } from '@arco-design/web-vue'
  const props = defineProps({
    activeTag: {
      type: String,
      default: () => {},
    },
  })
  const emit = defineEmits(['setImages'])
  const uploadRef = ref()
  const activeTitle: any = ref('全部')
  const pagination = usePagination(doRefresh)
  const infoRef = ref()
  const addClassPop = ref(false)
  const seachForm = ref()

  const modal = reactive({
    visible: false,
    showUploadvisible: false,
    showSet: false,
    showUploadModal: false,
  })
  const uplaodYunForm = reactive({
    type: 0,
  })
  const form = reactive({
    name: '',
    classId: null,
    startTime: '',
    endTime: '',
  })

  const tables = reactive({
    tableLoading: false,
    bordered: false,
    striped: false,
    expand: [1],
    isExpand: false,
  })

  const info: any = reactive({
    info: {
      file: '',
      id: '',
      name: '',
    },
    disabled: false,
  })

  const treeData: any = reactive({
    list: [],
    option: {},
    classList: [],
  })
  const tableColumnsClass: any = reactive({
    list: [
      {
        title: '分类名称',
        key: 'name',
        dataIndex: 'name',
        checked: true,
      },
      // {
      //   title: '应用数量',
      //   key: 'appNum',
      //   dataIndex: 'appNum',
      //   checked: true,
      // },
      {
        title: '排序',
        key: 'sort',
        dataIndex: 'sort',
        checked: true,
      },
      {
        title: '操作',
        key: 'actions',
        fixed: 'right',
        dataIndex: 'actions',
        width: 180,
        align: 'center',
        checked: true,
      },
    ],
  })
  const checkList: any = ref([])
  const chooseList: any = ref([])
  const rowKey = useRowKey('id')
  const chooseImages = ref([])
  const isItemIncluded = (val) => {
    return chooseList.value.some((item) => item.id === val)
  }
  const setImageClick = (item: any) => {
    if (props.activeTag == 'pageShow') {
      return false
    }
    item.activeTag = props.activeTag
    if (
      props.activeTag == 'goodsImage' ||
      props.activeTag == 'goodsImage1' ||
      props.activeTag == 'haibaoImage'
    ) {
      chooseList.value = []
      if (!chooseList.value.some((items: any) => items.path === item.path)) {
        chooseList.value.push(item)
      } else {
        chooseList.value = chooseList.value.filter((items) => items.path !== item.path)
      }
    } else {
      if (!chooseList.value.some((items: any) => items.path === item.path)) {
        chooseList.value.push(item)
      } else {
        chooseList.value = chooseList.value.filter((items) => items.path !== item.path)
      }
    }
    emit('setImages', chooseList)
    if (chooseList.value.length > 4) {
      const scrollBox: any = document.getElementById('scrollDiv')
      scrollBox.scrollTop = scrollBox.scrollHeight
      console.log(scrollBox.scrollTop)
    }
  }
  const clealChooseImgs = () => {
    chooseList.value = []
    emit('setImages', chooseList)
  }
  function changeTagType(value: any) {
    form.classId = value.id
    info.info.classId = value.id
    if (value.id != 0) {
      info.info.id = value.id
    }
    activeTitle.value = value.name
    doRefresh()
  }
  const setGroup = () => {
    info.info.id = ''
    modal.showSet = true
  }
  const showUpload = () => {
    modal.showUploadvisible = true
    info.info.file = ''
  }
  const closeUpload = () => {
    info.info.id = ''
    info.info.file = ''
    modal.showUploadvisible = false
    loadUpload.value = false
  }
  const fenleivisible = ref(false)
  const classLoading = ref(false)
  const typeClass: any = ref([])
  function showClassList() {
    fenleivisible.value = true
    getCancelClassList()
  }
  const contextMenuStyle: any = reactive({
    left: '0',
    top: '0',
  })
  const showContextMenu = ref(false)
  function onContextMenu(item: any, e: MouseEvent) {
    console.log(1234)
    subFormClass.value = JSON.parse(JSON.stringify(item))
    const { clientX, clientY } = e
    e.preventDefault()
    contextMenuStyle.left = clientX - 130 + 'px'
    contextMenuStyle.top = clientY - 260 + 'px'
    showContextMenu.value = true
  }
  function closeNext() {
    showContextMenu.value = false
  }
  watch(
    () => showContextMenu.value,
    () => {
      if (showContextMenu.value) {
        document.body.addEventListener('click', closeNext)
      } else {
        document.body.removeEventListener('click', closeNext)
      }
    },
    { deep: true }
  )
  watch(
    () => props.activeTag,
    (newVal, oldVal) => {
      console.log(oldVal, newVal)
      chooseList.value = []
    }
  )
  function getCancelClassList() {
    classLoading.value = true
    get({
      url: getClassification,
      data: () => {
        return {}
      },
    }).then((res) => {
      classLoading.value = false
      typeClass.value = res.data
    })
  }
  const subFormClass: any = ref({
    name: '',
    sort: 1,
  })
  const subAdds = ref<typeof Form>()
  function handleCancelClass() {
    subAdds.value?.resetFields()
    addClassPop.value = false
  }
  const classTitle = ref('添加分组')
  function updateClass(item: any) {
    classTitle.value = '编辑分组'
    subFormClass.value = JSON.parse(JSON.stringify(item))
    console.log(item)
    addClassPop.value = true
  }
  function updatClasss() {
    classTitle.value = '编辑分组'
    addClassPop.value = true
  }
  function delCancelClasss(item: any) {
    let delId = ''
    if (item.id) {
      delId = item.id
    } else {
      delId = subFormClass.value.id
    }
    Modal.warning({
      title: '操作确认',
      content: '确定要删除此分组吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        get({
          url: delImageClass,
          data: () => {
            return {
              id: delId,
            }
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              getCancelClassList()
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  function addClass() {
    subFormClass.value = {
      name: '',
      sort: 1,
    }
    classTitle.value = '添加分组'
    addClassPop.value = true
  }
  const btnLoading = ref(false)
  function handleBeforeOkAddClass() {
    subAdds.value?.validate().then((error: any) => {
      if (!error) {
        console.log(subFormClass.value)
        if (!subFormClass.value.id) {
          post({
            url: addImageClass,
            data: () => {
              return {
                ...subFormClass.value,
              }
            },
          }).then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              addClassPop.value = false
              subAdds.value?.resetFields()
              getVendorList()
            } else {
              Message.error(res.msg)
            }
          })
        } else {
          classTitle.value = '编辑分组'
          post({
            url: updateImageClass,
            data: () => {
              return {
                ...subFormClass.value,
              }
            },
          }).then((res) => {
            btnLoading.value = false
            if (res.code == 0) {
              Message.success(res.msg)
              addClassPop.value = false
              subAdds.value?.resetFields()
              getVendorList()
            } else {
              Message.error(res.msg)
            }
          })
        }
      }
    })
  }

  //Logo上传
  const onSuccessLogo = (fileItem: any) => {
    console.log(fileItem)
    loadUpload.value = false
    info.info.file = fileItem.response.msg
    Message.success('操作成功！')
    modal.showUploadvisible = false
    infoRef.value.resetFields()
    info.info.file = ''
    doRefresh()
  }
  // 上传失败
  const onErrorLogo = (item) => {
    console.log(item)
    loadUpload.value = false
    Message.error(item.response.msg)
  }
  const onChange = (fileItem: any) => {
    info.info.file = fileItem.slice(-1)[0].url
  }
  const loadUpload = ref(false)
  const handleSubmit = () => {
    if (!info.info.file) {
      return false
    }
    infoRef.value.validate((error: any) => {
      if (!error) {
        console.log(uploadRef.value.submit())
        loadUpload.value = true
        uploadRef.value.submit()
      }
    })
  }
  const loadingTongbu = ref(false)
  const handleSubmitUpy = () => {
    loadingTongbu.value = true
    get({
      url: cloudStorage,
      data: () => {
        return {
          type: uplaodYunForm.type,
        }
      },
    }).then((res) => {
      loadingTongbu.value = false
      modal.showUploadModal = false
      if (res.code == 0) {
        Message.success(res.msg)
        get({
          url: librartGetUrl,
          data: {},
        }).then((res) => {
          if (res.code == 0) {
            sessionStorage.setItem('imageUrl', res.data.url)
          }
        })
      } else {
        Message.error(res.msg)
      }
    })
  }
  const handleSubmitSet = () => {
    post({
      url: setImageList + '?id=' + info.info.id,
      data: () => {
        return checkList.value.map((item) => item.id)
      },
    }).then((res) => {
      btnLoading.value = false
      if (res.code == 0) {
        Message.success(res.msg)
        modal.showSet = false
        doRefresh()
        checkList.value = []
      } else {
        Message.error(res.msg)
      }
    })
  }
  const delImagesList = () => {
    Modal.warning({
      title: '操作确认',
      content: '确定要删除这些图片吗？',
      cancelText: '取消',
      titleAlign: 'start',
      hideCancel: false,
      okText: '删除',
      onOk: () => {
        post({
          url: delImages,
          data: () => {
            return checkList.value
          },
        })
          .then((res) => {
            if (res.code == 0) {
              Message.success(res.msg)
              doRefresh()
              checkList.value = []
            } else {
              Message.error(res.msg)
            }
          })
          .catch(console.log)
      },
    })
  }
  const getVendorList = () => {
    get({
      url: getClassification,
      data: () => {
        return {}
      },
    }).then((res) => {
      treeData.list = res.data
      treeData.list.unshift({ id: null, name: '全部' }, { id: 0, name: '未分组' })
      treeData.classList = treeData.list.slice(2, 100)
      doRefresh()
    })
  }

  const imageList: any = reactive({
    list: [],
  })
  const imagesLoading = ref(false)
  function doRefresh(value?: number) {
    imagesLoading.value = true
    pagination.pageSize = 20
    if (value) {
      pagination.page = value
    }
    get({
      url: getImageList,
      data: () => {
        return {
          page: pagination.page,
          size: pagination.pageSize,
          ...form,
        }
      },
    }).then((res) => {
      imagesLoading.value = false
      tables.tableLoading = false
      imageList.list = res.data.list
      pagination.setTotalSize((res.data as any).totalSize)
      return res.data
    })
  }

  onMounted(async () => {
    getVendorList()
  })
</script>

<style lang="less" scoped>
  /* .main-containers {
    margin: 20px;
  } */

  :deep(.main-container) {
    overflow-y: scroll !important;
    scrollbar-width: none !important;
  }

  :deep(.arco-table-cell-expand-icon) {
    justify-content: center;
  }

  :deep(.arco-btn-primary.arco-btn-status-success.arco-btn-disabled) {
    background: var(--color-success-light-1) !important;
    color: var(--color-success-light-3) !important;
  }

  :deep(.arco-btn-disabled) {
    background-color: #fff !important;
  }

  :deep(.arco-btn-primary.arco-btn-status-danger.arco-btn-disabled) {
    background: none !important;
    background-color: #fff !important;
    color: var(--color-danger-light-3) !important;
  }

  :deep(.bcgConfig) {
    display: none !important;
  }

  .arco-checkbox-group::after {
    content: '';
    flex: 1;
  }

  :deep(.arco-checkbox-label) {
    width: 70px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .butten {
    padding: 0px 4px;
  }

  :deep(.arco-input-append) {
    padding: 0px;
  }

  .imageBoxs {
    width: 100px;
    height: auto;
    margin: 0px 20px 20px 0px;
    .imgBox {
      width: 100%;
      height: 100px;
      .imageItems {
        width: 100%;
        height: 100px;
        border-radius: 4px;
      }
    }
    .imgBox2 {
      width: 100%;
      height: 100px;
      position: relative;
      .imageItem {
        width: 100%;
        height: 100px;
        border-radius: 4px;
      }
      .poImg {
        position: absolute;
        bottom: 0px;
        right: 0px;
        width: 26px;
        height: 25px;
      }
      .imageItems {
        width: 100%;
        height: 100px;
        border: 1px solid #3491fa;
        border-radius: 4px;
      }
    }
    .names_check {
      width: 100%;
      display: flex;
      justify-content: space-between;
    }
  }

  .contex-menu-wrapper {
    position: absolute;
    width: 100px;
    z-index: 1999;
    list-style: none;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background-color: var(--color-bg-1);
    padding-left: 0;
    border-radius: 4px;

    & > li {
      width: 100%;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      padding: 0px 0;

      & button {
        width: 100%;
      }
    }

    & > li:hover {
      color: var(--primary-color);
    }
  }

  .containBox {
    width: 100%;
    display: flex;
    background-color: var(--color-bg-1);
    border-radius: 10px;

    .tabelRight {
      width: 130px;
      max-height: 600px;
      overflow-y: auto;
      scrollbar-width: none;
      padding: 20px;

      .chooseLists {
        width: 100%;
        height: calc(100% - 40px);
        overflow-y: auto;
        scrollbar-width: none;

        .items {
          width: 100%;

          img {
            width: 90px;
            height: 90px;
          }

          .imgNames {
            width: 100%;
            font-size: 12px;
            color: #86909c;
            white-space: nowrap;
            text-overflow: ellipsis;
            overflow: hidden;
          }
        }
      }

      .heads {
        width: 100%;
        margin-bottom: 15px;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .yixuan {
          color: #86909c;
          font-size: 12px;
        }

        .closeAll {
          color: #f53f3f;
          font-size: 12px;
          cursor: pointer;
        }
      }
    }

    .tabelLeft {
      min-height: 100%;
      padding: 20px 20px 20px 20px;
      box-sizing: border-box;
      border-right: 1px solid var(--color-border);

      .tabTitle {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .title {
          color: rgb(var(--gray-10));
          font-size: 16px;
        }

        .btns {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }

      .tagList {
        width: 126px;
        border-radius: 5px;
        min-height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-content: space-between;
        border: 1px solid #f2f3f5;
        overflow: hidden;

        .tagTops {
          width: 100%;

          .activeTag {
            width: 100%;
            height: 36px;
            text-align: center;

            .actives {
              display: block;
              cursor: pointer;
              width: 100%;
              height: 100%;
              line-height: 34px;
              color: #fff;
              background-color: rgb(var(--primary-6));
            }

            .wraps {
              cursor: pointer;
              padding: 0px 20px;
              width: 100%;
              height: 100%;
              display: flex;
              align-items: center;
              line-height: 14px;

              img {
                width: 15px;
                height: 15px;
                margin-right: 10px;
              }
            }

            .noactive {
              display: block;
              cursor: pointer;
              width: 100%;
              color: rgb(var(--gray-10));
              height: 100%;
              line-height: 14px;
            }
          }
        }

        .tagBottoms {
          width: 100%;
          padding: 20px 20px 20px;

          :deep(.arco-btn-outline) {
            width: 100%;
          }
        }
      }
    }
  }
</style>
